<template>

	<view class="uni-comment-body">

		<view class="inputCss" style="position: absolute;margin-top: -60rpx;margin-left: 315rpx;">
			<u-popup v-model="show" mode="bottom" height="20%">
				<view>
					<u-input v-model="discuss.content" :type="type" :border="border" class="input" maxlength="50" />
				</view>
				<view>
					<u-button type="success" plain @click="sureadd()">评论</u-button>
				</view>
				<view>
					<u-button type="warning" plain @click="show=false">取消</u-button>
				</view>
			</u-popup>
			<uni-fab ref="fab" :pattern="pattern" horizontal="right" vertical="bottom" direction="horizontal"
				@trigger="trigger" @fabClick="fabClick" />
		</view>

		<view class="uni-no-comment" :style="'display: '+(list.length?'none':'block')">暂无评论</view>
		<!-- 评论区 start -->
		<view class="uni-comment">
			<!-- 循环显示一级评论 -->
			<view class="uni-comment-list" v-for="(item,index) in list" :key="item.id"
				v-if="item.pid==null||item.pid==0">
				<view class="uni-comment-face" @click.stop="clickUser(item.user.id)">
					<image :src="item.user.avr" mode="widthFix"></image>
				</view>
				<view class="uni-comment-body">
					<view class="uni-comment-top" @click.stop="clickUser(item.user.id)">
						<text style="color: white;">{{item.user.account}}</text>
					</view>
					<view class="uni-comment-date">
						<text>{{timestampFormat(item.time)}}</text>
					</view>
					<view>
						<view class="uni-comment-content">{{item.content}}
							<view style="position: absolute;margin-top: -80rpx;margin-left: 400rpx;">
								<u-button type="primary" :plain="true" size="mini"
									@click="clickComment(item.id,item.floor)">回复</u-button>
							</view>
							<view style="position: absolute;margin-top: -80rpx;margin-left: 500rpx;"
							:style="'display:'+(item.user.id==senderId?'block':'none')">
							<u-button type="warning" :plain="true" size="mini"
										@click="del(item.id,index)">删除</u-button>
							</view>
						</view>
					</view>


							<!-- 循环展示二级评论 -->
							<view class="uni-comment-list" v-for="(item2,index2) in list"
							v-if="item2.pid!=null&&item2.pid!=0&&item2.floor==item.floor">
								<view class="uni-comment-face" @click.stop="clickUser(item2.user.id)">
									<image :src="item2.user.avr" mode="widthFix"></image>
								</view>
								<view class="uni-comment-body">
									<view class="uni-comment-top" @click.stop="clickUser(item2.user.id)">
										<text style="color: white;">{{item2.user.account}}</text>
									</view>
									<view class="uni-comment-date">
										<text>{{timestampFormat(item2.time)}}</text>
									</view>
									<view v-if="item2.pdiscuss!=null">
										<view class="uni-reply-comment-content"
											:style="'display: '+(item2.pdiscuss.user.account && item2.pdiscuss.content?'block':'none')">
											@{{item2.pdiscuss.user.account}}：{{item2.pdiscuss.content}}</view>
										<view class="uni-comment-content">{{item2.content}}</view>
											<view>
												<view class="uni-comment-replay-btn"
													@click="clickComment(item2.id,item2.floor)">
													回复
												</view>
												<view class="uni-comment-replay-btn"
												:style="'display:'+(item2.user.id==senderId?'block':'none')"
												style="position: absolute;margin-top: -47rpx;margin-left: 100rpx;"
												@click="del(item2.id,index2)">
													删除
												</view>
											</view>
									</view>
									<view v-else>
										{{item2.content}}
									</view>
								</view>
							</view>

				</view>
			</view>

		</view>
	</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array
			},
			momentId:0,
			senderId:0,
		},
		data() {
			return {
				discuss: {
					id:0,
					content: "",
					senderId: 0, //TODO：用户id写死了
					momentId: 0,
					pid: 0,
					time: "",
					floor: 0,
					index:0,
				},
				show: false,
				type: 'text',
				border: true,
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF',
					iconColor: '#fff'
				},
			}
		},
		methods: {
			del(e,index){
				console.log(e,index);
				this.discuss.id=e
				this.discuss.index=index
				this.$emit("del",this.discuss)
			},
			//点击评论上的回复
			clickComment(id, floor) {
				this.discuss.pid = id
				this.discuss.floor = floor
				this.$emit("clickComment", this.discuss)
				this.show = true;
			},
			//点击用户（冇用）
			clickUser(userId) {},
			//显示评论窗口
			fabClick() {
				this.show = true;
			},
			//确认评论
			sureadd() {
				this.$emit("sureadd", this.discuss)
				this.show = false;
				this.discuss.pid = 0
				this.discuss.floor =0
				this.discuss.content=""
			},
			timestampFormat(timestamp) {
				if (!timestamp) return '';

				function zeroize(num) {
					return (String(num).length == 1 ? '0' : '') + num;
				}

				var curTimestamp = parseInt(new Date().getTime() / 1000); //当前时间戳
				var timestampDiff = curTimestamp - timestamp; // 参数时间戳与当前时间戳相差秒数

				var curDate = new Date(curTimestamp * 1000); // 当前时间日期对象
				var tmDate = new Date(timestamp * 1000); // 参数时间戳转换成的日期对象

				var Y = tmDate.getFullYear(),
					m = tmDate.getMonth() + 1,
					d = tmDate.getDate();
				var H = tmDate.getHours(),
					i = tmDate.getMinutes(),
					s = tmDate.getSeconds();

				if (timestampDiff < 60) { // 一分钟以内
					return "刚刚";
				} else if (timestampDiff < 3600) { // 一小时前之内
					return Math.floor(timestampDiff / 60) + "分钟前";
				} else if (curDate.getFullYear() == Y && curDate.getMonth() + 1 == m && curDate.getDate() == d) {
					return '今天' + zeroize(H) + ':' + zeroize(i);
				} else {
					var newDate = new Date((curTimestamp - 86400) * 1000); // 参数中的时间戳加一天转换成的日期对象
					if (newDate.getFullYear() == Y && newDate.getMonth() + 1 == m && newDate.getDate() == d) {
						return '昨天' + zeroize(H) + ':' + zeroize(i);
					} else if (curDate.getFullYear() == Y) {
						return zeroize(m) + '月' + zeroize(d) + '日 ' + zeroize(H) + ':' + zeroize(i);
					} else {
						return Y + '年' + zeroize(m) + '月' + zeroize(d) + '日 ' + zeroize(H) + ':' + zeroize(i);
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.inputCss {

		color: red,
		::v-deep.input {
			.u-input__input {
				color: black
			}
		}
	}

	.reply {
		color: royalblue;
	}

	.u-collapse-content {
		color: $u-tips-color;
		font-size: 14px;
	}

	.propertyBox {
		flex-flow: row;
		justify-content: stretch;
		display: flex;
	}

	/* comment */
	.uni-comment-body {
		background-color: black;
		font-size: 28upx;
	}

	.uni-no-comment {
		text-align: center;
		height: 200upx;
		padding-top: 100upx;
		color: white;
	}

	view {
		font-size: 28upx;
	}

	.uni-comment {
		padding: 5rpx 0;
		display: flex;
		flex-grow: 1;
		flex-direction: column;
		color: white;
	}

	.uni-comment-list {
		flex-wrap: nowrap;
		padding: 10rpx 0;
		margin: 10rpx 0;
		width: 100%;
		display: flex;
	}

	.uni-comment-face {
		width: 70upx;
		height: 70upx;
		border-radius: 100%;
		margin-right: 20upx;
		flex-shrink: 0;
		overflow: hidden;
	}

	.uni-comment-face image {
		width: 100%;
		border-radius: 100%;
	}

	.uni-comment-body {
		width: 100%;
	}

	.uni-comment-top {
		line-height: 1.5em;
		justify-content: space-between;
	}

	.uni-comment-top text {
		color: #000000;
		font-size: 28upx;
	}

	.uni-comment-date {
		line-height: 24upx;
		flex-direction: row;
		justify-content: space-between;
		display: flex !important;
		flex-grow: 1;
	}

	.uni-comment-date text {
		color: gray;
		font-size: 24upx;
		line-height: 24upx;
	}

	.uni-comment-content {
		line-height: 1.6em;
		font-size: 30upx;
		padding: 10rpx 0;
	}

	.uni-reply-comment-content {
		line-height: 1.6em;
		font-size: 30upx;
		padding: 5upx 10upx;
		margin: 10upx 0;
		background-color: #d1d1d147;
		border-radius: 5upx;
	}

	.uni-comment-replay-btn {
		background: #FFF;
		font-size: 24upx;
		line-height: 30upx;
		padding: 5rpx 20upx;
		border-radius: 30upx;
		color: white !important;
		margin: 0 10upx;
		margin-left: 0;
		padding: 8upx 16upx;
		background-color: #d1d1d147;
		display: inline-block;
		color: white;
	}
</style>
